
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" type="text/css" href="css/details.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/details.js"></script>

    <script>
        function gouwu(){
            location.href='${pageContext.request.contextPath}/groupUserServlet';
        }
        $(function (){
                var html="<div>规格</div>"
            for (let i = 0; i < window.eval(${requestScope.details.specs}).length; i++) {
                if (window.eval(${requestScope.details.specs}).length>1){
                    if (i==1){
                        html+="<li class='guigeya'>"
                        html+=window.eval(${requestScope.details.specs})[i]
                        html+="</li>"
                    }else {
                        html+="<li class='guigeer'>"
                        html+=window.eval(${requestScope.details.specs})[i]
                        html+="</li>"
                    }
                }else {
                    html+="<li class='guigeya'>"
                    html+=window.eval(${requestScope.details.specs})[0]
                    html+="</li>"
                }
                }
                document.getElementById("xunhuanl").innerHTML=html
                var minimg=""
            var guo= window.eval(${requestScope.details.smMinImg})
                for (let i=0;i<window.eval(${requestScope.details.smMinImg}).length;i++){
                minimg+="<li>"
                minimg+="<img id='minimgga' src='"+guo[i]+"'>"
                minimg+="</li>"
                document.getElementById("minimg").innerHTML=minimg
            }
                var koubu="";
                var koubuer="";
                var shuzu= window.eval(${requestScope.details.smMaxImg});
                koubu+="<img style='width: 400px;height: 400px'  class='zhendemi' src='"+shuzu[0]+"'>"
                koubuer+="<img class='bigImg' src='"+shuzu[0]+"'>"

                document.getElementById("middleX-img").innerHTML=koubu
                document.getElementById("big").innerHTML=koubuer


            let shangp= JSON.parse(localStorage.getItem('shanping')||"[]")

                if(JSON.stringify(localStorage.getItem('shanping'))!="null"){
                    let indexshan=0
                    let zongshuya=0
                    shangp.map(function(el,index){
                        //把本地缓存的文本转成数字型
                        indexshan+=Number(shangp[index].quantity)
                        $('.datails-lieibao').children('ol').append("<li data-id='"+shangp[index].id+"'><img src='"+shangp[index].picture+"'><p id='p_M'></p><span id='span_M'></span><div id='div_M'></div><h3 class='datails-shan'>删除</h3></li>")
                        $('.datails-lieibao').children('ol').find("li").eq(index).children("p").text(shangp[index].title)
                        $('.datails-lieibao').children('ol').find("li").eq(index).children("span").text(shangp[index].unit)
                        $('.datails-lieibao').children('ol').find("li").eq(index).children("div").text("X "+Number(shangp[index].quantity))

                        zongshuya+=shangp[index].unit*shangp[index].quantity
                    })
                    // 这里就是赋值给了那个div的文本
                    $('.touxiang2').children('.datails-shuliang').children('div').text(indexshan)
                    $('.datails-nandaoma').children('div:eq(0)').children().text(indexshan)
                    $('.datails-nandaoma').children('div:eq(1)').children().text(zongshuya.toFixed(2))
                    $('.datails-lieibao').children('ol').css('display','block')
                    $('.datails-lieibao').children('.datails-nandaoma').css('display','block')
                }else{
                    $('.datails-lieibao').children('ol').css('display','none')
                    $('.datails-lieibao').children('.datails-nandaoma').css('display','none')
                }




                $('.megnban').height($('.big').height() / $('.bigImg').height() * $(".middleX").height())
                $('.megnban').width($('.big').width() / $('.bigImg').width() * $(".middleX").width())
                $('.middleX').on('mouseenter', function () {
                    $('.megnban').css('display', 'block');
                    $('.big').css('display', 'block');
                }).on('mousemove', function (e) {
                    let disX = e.pageX - $('.middleX').offset().left - $('.megnban').height() / 2;
                    let disY = e.pageY - $('.middleX').offset().top -$('.megnban').width() / 2;

                    if (disX < 0) {
                        disX = 0
                    }
                    if (disY < 0) {
                        disY = 0
                    }
                    if (disX > $('.middleX').width() - $('.megnban').width()) {
                        disX = $('.middleX').width() - $('.megnban').width()
                    }
                    if (disY > $('.middleX').height() - $('.megnban').height()) {
                        disY = $('.middleX').height() - $('.megnban').height()
                    }
                    $('.megnban').css('left', disX).css('top', disY)

                    // 大图/小图 大图动
                    let oScale = $('.bigImg').height() / $('.middleX').height()
                    $('.bigImg').css({
                        left: oScale * -disX,
                        top: oScale * -disY,
                    })
                }).on('mouseleave', function () {
                    $('.megnban').css('display', 'none');
                    $('.big').css('display', 'none');
                })

                $('.small').find('li').on('click', function () {
                    $('.middleX').find('img').attr('src', shuzu[Number($(this).index())])
                    $('.bigImg').attr('src', shuzu[Number($(this).index())])
                })

            $("#xunhuanl").children("li").on('click',function (){
                $(this).removeClass("guigeer")
                $(this).addClass("guigeya")
                $(this).siblings("li").removeClass("guigeya")
                $(this).siblings("li").addClass("guigeer")
            })

            //购物车删除
            $('.datails-shan').on('click',function(){
                let koubu= JSON.parse(localStorage.getItem('shanping')||"[]")
                var dataId=$(this).parent().data('id')
                var kewu=$(this).parent()

                var zi=Number($(this).siblings('#div_M').text().split(" ")[1])
                var zong=Number($('.datails-shuliang').children('div').text())

                //个人总价
                var gerzong=Number($(this).siblings('#span_M').text())*zi
                var shnagpsz=Number($('.datails-nandaoma').children('div:eq(1)').children('span').text())
                koubu.map(function (el,index){
                        if (el.id==dataId){
                            koubu.splice(index,1)
                            kewu.remove();
                            $('.datails-shuliang').children('div').text(zong-zi)
                            $('.datails-nandaoma').children('div:eq(0)').children('span').text(zong-zi)
                            $('.datails-nandaoma').children('div:eq(1)').children('span').text((shnagpsz-gerzong).toFixed(2))
                        }
                })
                 localStorage.setItem('shanping',JSON.stringify(koubu))
            })

            var jieshao= window.eval(${requestScope.details.introduce})
            var kewuya=""
            for (var i=0;i<jieshao.length;i++){
                kewuya+="<img style='width: 100%;vertical-align:top;' class='qingxidu' src='"+jieshao[i]+"' alt=''>"
            }
            kewuya+="<div style='width: 100%;height: 50px'></div>"
            $('.xiaosiwol').html(kewuya)

            var xiabiao= $('#ol_len').children('li').last().data("len")
            if (typeof(xiabiao)!="undefined"){
                $('.datails-shanpan').children('ul').children('li:eq(1)').text("晒单("+xiabiao+")")
            }else {
                $('.datails-shanpan').children('ul').children('li:eq(1)').text("晒单(" + 0 + ")")
            }
            zaixian();
            jiage();
            ling();
            feirugouwuce();
            gouwuba();
            stored();
        })

        function fanhuishang (){
            window.history.go(-1);
        }

        function zaixian(){
            setInterval(ceshi,600)
              function ceshi(){
                $('.dtails-rightdou').children('img').animate({top:5},300).animate({top:2},300)
              }
              let user=JSON.parse(localStorage.getItem('user')||"[]")
             // if(user!="[]"){
             //     let zhi= user[0].cell
             //     $('.datails-yonghuming').children('span:eq(1)').text(zhi)
             // }

             $('.touxiang').hover(function(){
              $('.datails-degnlu').css('display','block')
             },function(){
              $('.datails-degnlu').css('display','none')
             })
             $('.datails-degnlu').hover(function(){
              $('.datails-degnlu').css('display','block')
             },function(){
              $('.datails-degnlu').css('display','none')
             })
        }
        function jiage(){
            var gao= $('.datails-jiake').children('span:eq(2)').text();
            $('.datails-jiake5').children('.datails-jia').on('click',function(){

                let shuzhi= Number($('.datails-jiake5').children('input').val())+1
                $('.datails-jiake5').children('input').val(shuzhi)
                let zuizhong=Number(gao)*shuzhi
                $('.datails-jiake').children('span:eq(2)').text(zuizhong.toFixed(2))
            })

            $('.datails-jiake5').children('.datails-jian').on('click',function(){
                var gaox= $('.datails-jiake').children('span:eq(2)').text();
                ke()
                function ke(){

                    if(Number($('.datails-jiake5').children('input').val())>1){
                        let shuzhi= Number($('.datails-jiake5').children('input').val())-1
                        $('.datails-jiake5').children('input').val(shuzhi)
                        let zuizhong=Number(gaox)-gao
                        $('.datails-jiake').children('span:eq(2)').text(zuizhong.toFixed(2))
                    }
                }
            })

            let shangp= JSON.parse(localStorage.getItem('shanping')||"[]")
            fang()
            function fang(){
                if(JSON.stringify(localStorage.getItem('shanping'))!="null"){
                    let ke=1

                    var gao= $('.datails-jiake').children('span:eq(2)').text();

                    let zuizhong=Number(gao)*ke
                    $('.datails-jiake').children('span:eq(2)').text(zuizhong.toFixed(2))
                    $('.datails-jiake5').children('input').val(ke)
                }else{
                    console.log('空');
                }
            }

        }
        function ling(){
            $('.touxiang1').hover(function(){
                // $('.datails-linghong').animate({right:36},300)
                $('.datails-linghong').css('display','block')
            },function(){
                $('.datails-linghong').css('display','none')
                // $('.datails-linghong').css('right',80)
            })
            $('.datails-linghong').hover(function(){
                // $('.datails-linghong').css('right',36)
                $('.datails-linghong').css('display','block')

            },function(){
                // $('.datails-linghong').css('right',80)
                $('.datails-linghong').css('display','none')
            })

            $('.touxing3').hover(function(){
                // $('.datails-linghong').animate({right:36},300)
                $('.datails-linghong2').css('display','block')
            },function(){
                $('.datails-linghong2').css('display','none')
                // $('.datails-linghong').css('right',80)
            })

            $('.datails-linghong2').hover(function(){
                // $('.datails-linghong').css('right',36)
                $('.datails-linghong2').css('display','block')
                $('.touxing3').css('background','#ff666b')

            },function(){
                // $('.datails-linghong').css('right',80)
                $('.datails-linghong2').css('display','none')
                $('.touxing3').css('background','#000')
            })


            $('.touxing4').hover(function(){
                // $('.datails-linghong').animate({right:36},300)
                $('.datails-linghong3').css('display','block')
            },function(){
                $('.datails-linghong3').css('display','none')
                // $('.datails-linghong').css('right',80)
            })

            $('.datails-linghong3').hover(function(){
                // $('.datails-linghong').css('right',36)
                $('.datails-linghong3').css('display','block')
                $('.touxing4').css('background','#ff666b')

            },function(){
                // $('.datails-linghong').css('right',80)
                $('.datails-linghong3').css('display','none')
                $('.touxing4').css('background','#000')
            })


            $('.touxing5').hover(function(){
                // $('.datails-linghong').animate({right:36},300)
                $('.datails-linghong4').css('display','block')
            },function(){
                $('.datails-linghong4').css('display','none')
                // $('.datails-linghong').css('right',80)
            })

            $('.datails-linghong4').hover(function(){
                // $('.datails-linghong').css('right',36)
                $('.datails-linghong4').css('display','block')
                $('.touxing5').css('background','#ff666b')

            },function(){
                // $('.datails-linghong').css('right',80)
                $('.datails-linghong4').css('display','none')
                $('.touxing5').css('background','#000')
            })


            $('.touxing6').hover(function(){
                // $('.datails-linghong').animate({right:36},300)
                $('.datails-linghong5').css('display','block')
            },function(){
                $('.datails-linghong5').css('display','none')
                // $('.datails-linghong').css('right',80)
            })

            $('.datails-linghong5').hover(function(){
                // $('.datails-linghong').css('right',36)
                $('.datails-linghong5').css('display','block')
                $('.touxing6').css('background','#ff666b')

            },function(){
                // $('.datails-linghong').css('right',80)
                $('.datails-linghong5').css('display','none')
                $('.touxing6').css('background','#000')
            })
        }
        function feirugouwuce(){
            var id=Number($('.datails-middle').attr('id'))
            //加入购物车按钮
            let number=$('.numberm').text()
            $('.datails-gouwu').on('click',function(){
                let cloneImg=$('.middleX').children('.middleX-img').children().clone(true)
                let clonewei=$('.middleX').children('.middleX-img').children().offset()
                clonewei.position = 'absolute';
                clonewei.top=0
                clonewei.left=0
                cloneImg.css(clonewei)
                $('.middleX-img').append(cloneImg)
                // 飞的目标
                let target=$('.touxiang2').offset()
                target.top = 40
                target.width=0
                target.height=0
                // 4.飞
                cloneImg.animate(target, 1000, function () {
                    cloneImg.remove()
                })
                var comment_id=$('#xiang').data('comm')
                let hh=$('.small').children('ol').children('li:eq(0)').children().attr('src');
                let bitaoti=$('.datails-middle').children('span:eq(1)').text();
                let jiake=$('.datails-middle').children('.datails-jiake').children('span:eq(2)').text();
                let input=$('.datails-middle').children('.datails-jiake5').children('input').val();
                let guige=$('#xunhuanl').children('.guigeya').text();
                let shangp=JSON.parse(localStorage.getItem('shanping')||"[]")
                var flg=true
                if (JSON.stringify(localStorage.getItem('shanping'))=="null"){
                    shangp.push({
                        picture:hh,
                        title:bitaoti,
                        unit:Number(number),
                        total:Number(jiake).toFixed(2),
                        quantity:Number(input),
                        guige:guige,
                        id:id,
                        commentid:comment_id
                    })
                    $('.datails-lieibao').children('ol').append("<li><img src='"+shangp[0].picture+"'><p id='p_M'></p><span id='span_M'></span><div id='div_M'></div><h3 class='datails-shan'>删除</h3></li>")
                    $('.datails-lieibao').children('ol').find("li").eq(0).children("p").text(shangp[0].title)
                    $('.datails-lieibao').children('ol').find("li").eq(0).children("span").text(shangp[0].unit)
                    $('.datails-lieibao').children('ol').find("li").eq(0).children("div").text("X"+Number(shangp[0].quantity))
                }else {
                    for (var i=0;i<shangp.length;i++){
                        if (shangp[i].title==bitaoti){
                            shangp[i].quantity=Number(shangp[i].quantity+Number(input))
                            flg=false
                            break;
                        }else {
                            flg=true
                        }
                    }
                    if (flg){

                        shangp.push({
                            picture:hh,
                            title:bitaoti,
                            unit:Number(number),
                            total:Number(jiake).toFixed(2),
                            quantity:Number(input),
                            guige:guige,
                            id:id,
                            commentid:comment_id
                        })
                    }
                }

                localStorage.setItem('shanping',JSON.stringify(shangp))

                var flger=true
                let gaoxiaol=0
                let zongshusan=0
                for (var i=0;i<shangp.length;i++){
                    //把本地缓存的文本转成数字型
                    zongshusan+=shangp[i].unit*shangp[i].quantity
                    if (shangp[i].title==bitaoti){
                        if ($('.datails-lieibao').children('ol').children("li").eq(i).children("p").text()==bitaoti){
                            $('.datails-lieibao').children('ol').find("li").eq(i).children("div").text("X"+Number(shangp[i].quantity))
                            flger=false
                            break;
                        }else {
                            $('.datails-lieibao').children('ol').append("<li ><img src='"+shangp[i].picture+"'><p id='p_M'></p><span id='span_M'></span><div id='div_M'></div><h3 class='datails-shan'>删除</h3></li>")
                            $('.datails-lieibao').children('ol').find("li").eq(i).children("p").text(shangp[i].title)
                            $('.datails-lieibao').children('ol').find("li").eq(i).children("span").text(shangp[i].unit)
                            $('.datails-lieibao').children('ol').find("li").eq(i).children("div").text("X"+Number(shangp[i].quantity))
                            flger=false
                            break;
                        }
                    }else {
                        flger=true
                        gaoxiaol=i
                    }
                }

                let indexshan=0
                shangp.map(function(el,index) {
                    indexshan+=Number(shangp[index].quantity)
                })


                if (flger){
                    $('.datails-lieibao').children('ol').append("<li ><img src='"+shangp[gaoxiaol].picture+"'><p id='p_M'></p><span id='span_M'></span><div id='div_M'></div><h3 class='datails-shan'>删除</h3></li>")
                    $('.datails-lieibao').children('ol').find("li").eq(i).children("p").text(shangp[gaoxiaol].title)
                    $('.datails-lieibao').children('ol').find("li").eq(i).children("span").text(shangp[gaoxiaol].unit)
                    $('.datails-lieibao').children('ol').find("li").eq(i).children("div").text("X"+Number(shangp[gaoxiaol].quantity))
                }
                $('.datails-nandaoma').children('div:eq(0)').children().text(indexshan)
                $('.datails-nandaoma').children('div:eq(1)').children().text(zongshusan.toFixed(2))
                // 这里就是赋值给了那个div的文本
                $('.touxiang2').children('.datails-shuliang').children('div').text(indexshan)
                $('.datails-lieibao').children('ol').css('display','block')
                $('.datails-lieibao').children('.datails-nandaoma').css('display','block')



            })
            // 如果本地缓存不等于空的话就触发

        }
        function gouwuba(){

            $('.touxiang2').on('mouseover',function(){
                $('.datails-shuliang').css('background','#fff')
                $('.datails-shuliang').children().css('color','green')
            }).on('mouseout',function(){
                $('.datails-shuliang').css('background','#ef6064')
                $('.datails-shuliang').children().css('color','#fff')
            })

            $('.touxiang2').on('click',function(){
                $('.datails-guding').css('right','270px')
                $('.datails-degnlu').css('right','306px')
                $('.datails-linghong').css('right','305px')
                $('.datails-linghong2').css('right','305px')
                $('.datails-linghong3').css('right','305px')
                $('.datails-linghong4').css('right','305px')
                $('.datails-linghong5').css('right','305px')
                $('.datails-lieibao').css('display','block')

            })

            $(document).bind('click',function(event){
                let e=window.event||event
                let ava = e.target || e.srcElement;
                zhendeshi()
                function zhendeshi(){
                    if(ava.className=='datails-guding'||ava.className=='datails-lieibao'||ava.className=='touxiang2'||ava.className=='datails-keshi'||ava.className=='datails-shan'||ava.className=='datails-ke'||ava.className=='datails-nandaoma'){
                        // console.log(333);
                    }else{
                        $('.datails-degnlu').css('right','36px')
                        $('.datails-guding').css('right','0px')
                        $('.datails-linghong').css('right','35px')
                        $('.datails-linghong2').css('right','35px')
                        $('.datails-linghong3').css('right','35px')
                        $('.datails-linghong4').css('right','35px')
                        $('.datails-linghong5').css('right','35px')
                        $('.datails-lieibao').css('display','none')
                    }
                }
            })
        }
        function stored(){


            $(".datails-sale").children('ul').children('li').on('mouseenter',function(){
                $(this).css('color','#ff666b').siblings().css('color','#000')
                $(this).css('borderBottom','1px solid #ff666b').siblings().css('borderBottom','1px solid #eee')
                banduanl()
                function banduanl(){
                    let kk= $(".datails-sale").children('ul').children('li:eq(0)').css('color')=='rgb(255, 102, 107)'

                    if(kk==true){
                        $('.datails-sale').children('ol:eq(0)').css('opacity','1').siblings('ol').css('opacity','0')
                    }else{
                        $('.datails-sale').children('ol:eq(1)').css('opacity','1').siblings('ol').css('opacity','0')
                    }

                }
            })


            $('.datails-shanpan').children('ul').children().map(function(el,index){
                $(index).on('click',function(){
                    $(index).css('background','#ff666b').siblings().css('background','#fafafa')
                    $(index).css('color','#fff').siblings().css('color','#666')
                    ke()
                    function ke(){

                        if(el==0){
                            $('.datails-suoyouping').children('ul').css('display','block')
                            $('.datails-suoyouping').children('ol').css('display','none')
                            $('.datails-suoyouping').children('.kaonima').css('display','none')
                            $('.datails-suoyouping').children('.zhongping').css('display','none')
                            $('.datails-suoyouping').children('.chaping').css('display','none')
                        }
                        if(el==1){
                            $('.datails-suoyouping').children('ul').css('display','none')
                            $('.datails-suoyouping').children('.kaonima').css('display','none')
                            $('.datails-suoyouping').children('.zhongping').css('display','none')
                            $('.datails-suoyouping').children('.chaping').css('display','none')
                            $('.datails-suoyouping').children('ol').css('display','block');

                        }
                        if(el==2){
                            $('.datails-suoyouping').children('ul').css('display','none')
                            $('.datails-suoyouping').children('ol').css('display','none')
                            $('.datails-suoyouping').children('.zhongping').css('display','none')
                            $('.datails-suoyouping').children('.chaping').css('display','none')
                            $('.datails-suoyouping').children('.kaonima').css('display','block')
                        }
                        if(el==3){
                            $('.datails-suoyouping').children('ul').css('display','none')
                            $('.datails-suoyouping').children('ol').css('display','none')
                            $('.datails-suoyouping').children('.kaonima').css('display','none')
                            $('.datails-suoyouping').children('.chaping').css('display','none')
                            $('.datails-suoyouping').children('.zhongping').css('display','block')
                        }
                        if(el==4){
                            $('.datails-suoyouping').children('ul').css('display','none')
                            $('.datails-suoyouping').children('ol').css('display','none')
                            $('.datails-suoyouping').children('.kaonima').css('display','none')
                            $('.datails-suoyouping').children('.zhongping').css('display','none')
                            $('.datails-suoyouping').children('.chaping').css('display','block')
                        }
                    }
                })
            })
        }
    </script>
</head>
<body>

<div class="max" id="${sessionScope.usersList.user_pur}">

    <%--头部--%>
    <%@include file="head.jsp"%>


    <!-- 详情介绍标题 -->
    <div id="xiang" data-comm="${requestScope.details.comment_id}" class="details-biao">
        <ul>
            <li onclick="fanhuishang()" style="cursor: pointer">首页</li>
            <li>></li>
            <li>${requestScope.details.name}</li>

        </ul>
    </div>

    <div class="datails-fang">
        <div class="datails-max">
            <div class="outer">
                <div class="inner">
                    <div class="middleX">
                        <div class="megnban"></div>
                        <div class="middleX-img" id="middleX-img">

                        </div>

                    </div>
                    <div class="small">
                        <ol id="minimg">

                        </ol>
                    </div>
                    <div class="big" id="big">

                    </div>
                </div>
            </div>
            <!-- 详情中间部分 -->
            <div class="datails-middle"  id="${requestScope.details.shopId}" >
                <span>自营</span>
                <span>${requestScope.details.name}</span>
                <div>${requestScope.details.intro}</div>

                <div class="datails-jiake">
                    <span>新人价</span>
                    <span>￥</span>
                    <span class="numberm">${requestScope.details.price}</span>
                </div>
                <div class="datails-jiake1">
                    <span>活动</span>
                    <span>满199减15 满499减50 满799减80 满999减100 满1599减180 去凑单></span>
                </div>
                <div class="datails-jiake2">
                    <span>评价</span>
                    <span><img src="img/五星.png" alt=""></span>
                    <span>（已有<span style="color:#ef6064">${fn:length(sessionScope.pingl)}</span>人评价）</span>
                </div>
                <div class="datails-jiake3">
                    <ul id="xunhuanl">



                    </ul>

                </div>

                <div class="datails-jiake4">
                    <span>配送</span>
                    <span>现货，现在下单，明天从香港仓发货！全场满88元包邮配送说明</span>
                </div>
                <div class="datails-jiake5">
                    <span>数量</span>
                    <button class="datails-jian">-</button>
                    <input class="zhimi" type="text" value="1">
                    <button class="datails-jia">+</button>
                </div>
                <button class="datails-gouwu">加入购物车</button>
            </div>
            <div class="datails-right">
                <img class="dtails-rightantim" src="img/韩国兰芝.png" alt="">
                <div class="dtails-righthan">韩国兰芝</div>
                <div class="dtails-rightdou">
                    <img src="img/在线客服.png" alt="">
                    <span>在线客服</span>
                </div>
                <div class="dtails-rightjinru">
                    <ul>
                        <li>进入店铺</li>
                        <li>收藏店铺</li>
                    </ul>
                </div>
                <img class="datails-rightxinren" src="img/新人福利.jpg" alt="">
            </div>

            <div class="datails-tottom">
                <ul>
                    <li>商品货号 ${requestScope.details.comment_id}</li>
                    <li><img src="img/尾部车5.png" alt=""></li>
                    <li>分享</li>
                    <li><img src="img/尾部车5.png"></li>
                    <li>收藏</li>
                    <li><img src="img/尾部车.gif" alt=""></li>
                    <li>自营正品保障</li>
                    <li><img src="img/尾部车2.gif"></li>
                    <li>29元全场包邮</li>
                    <li><img src="img/尾部车3.gif" alt=""></li>
                    <li>30天无理由退</li>
                </ul>
            </div>
        </div>
        <div class="datails-sale">

            <ul>
                <li>同分类热销榜</li>
                <li>同品牌热销榜</li>
            </ul>
            <ol>
                <li>
                    <img src="img/分类热销1.jpg " alt="">
                    <div>韩国Wonjin原辰安瓶补水面膜洁面套盒</div>
                    <span>￥ 65.55</span>
                    <span>月销257件</span>
                </li>
                <li>
                    <img src="img/分类热销2.jpg " alt="">
                    <div>澳大利亚Eaoron澳容水光针玻尿酸胶原蛋白面膜25ml×5片</div>
                    <span>￥ 65.55</span>
                    <span>月销242件</span>
                </li>
                <li>
                    <img src="img/分类热销3.jpg " alt="">
                    <div>韩国JMsolution肌司研海洋珍珠保湿面膜三部曲30ml×10片</div>
                    <span>￥ 37.05</span>
                    <span>月销241件</span>
                </li>
                <li>
                    <img src="img/分类热销4.jpg " alt="">
                    <div>韩国JMsolution肌司研海洋珍珠保湿面膜三部曲30ml×10片</div>
                    <span>￥ 37.05</span>
                    <span>月销240件</span>
                </li>
                <li>
                    <img src="img/分类热销5.jpg " alt="">
                    <div>韩国Dr.Jart+蒂佳婷蓝丸面膜25g×5片</div>
                    <span>￥ 48.85</span>
                    <span>月销238件</span>
                </li>
            </ol>
            <ol>
                <li>
                    <img src="img/品牌热销1.jpg " alt="">
                    <div>韩国Laneige兰芝睡眠面膜100ml</div>
                    <span>￥ 129.00</span>
                    <span>月销173件</span>
                </li>
                <li>
                    <img src="img/品牌热销2.jpg " alt="">
                    <div>韩国Laneige兰芝小白光气垫(#13号亮米白色)正装15g+替</div>
                    <span>￥ 119.00</span>
                    <span>月销149件</span>
                </li>
                <li>
                    <img src="img/品牌热销3.jpg " alt="">
                    <div>韩国Laneige兰芝多效洗面奶(蓝色款)150ml</div>
                    <span>￥ 99.00</span>
                    <span>月销138件</span>
                </li>
                <li>
                    <img src="img/品牌热销2.jpg " alt="">
                    <div>韩国Laneige兰芝小白光气垫(#13号亮米白色)正装15g+替</div>
                    <span>￥ 119.00</span>
                    <span>月销149件</span>
                </li>
                <li>
                    <img src="img/品牌热销4.jpg " alt="">
                    <div>韩国Laneige兰芝致美紧颜眼霜20ml</div>
                    <span>￥ 206.00</span>
                    <span>月销96件</span>
                </li>
            </ol>
        </div>
        <div class="datails-introduction">
            <ul>
                <li>
                    <div class="datails-yigoumai">购买该商品的人还买了</div>
                    <div class="datails-xiangguan">
                        <img src="img/品牌热销1.jpg" alt="">
                        <div>韩国Laneige兰芝睡眠面膜100ml</div>
                        <span>￥129.00</span>
                        <span>月销173件</span>
                    </div>

                    <div class="datails-xiangguan">
                        <img src="img/品牌热销2.jpg " alt="">
                        <div>韩国Laneige兰芝小白光气垫(#13号亮米白色)</div>
                        <span>￥119.00</span>
                        <span>月销149件</span>
                    </div>
                    <div class="datails-xiangguan">
                        <img src="img/品牌热销3.jpg " alt="">
                        <div>韩国Laneige兰芝多效洗面奶(蓝色款)150ml</div>
                        <span>￥ 99.00</span>
                        <span>月销138件</span>
                    </div>
                    <div class="datails-xiangguan">
                        <img src="img/分类热销1.jpg " alt="">
                        <div>韩国Wonjin原辰安瓶补水面膜洁面套盒</div>
                        <span>￥65.55</span>
                        <span>月销257件</span>
                    </div>
                    <div class="datails-xiangguan">
                        <img src="img/分类热销2.jpg " alt="">
                        <div>澳大利亚Eaoron澳容水光针玻尿酸胶原蛋白面膜</div>
                        <span>￥65.55</span>
                        <span>月销242件</span>
                    </div>
                </li>
                <li>
                    <div class="datails-jiaru">
                        <span style="cursor: pointer">商品介绍</span>
                        <c:if test="${sessionScope.pingl!='[]'}">
                        <span style="cursor: pointer">商品评价(${fn:length(sessionScope.pingl)})</span>
                        </c:if>
                        <c:if test="${sessionScope.pingl=='[]'}">
                            <span style="cursor: pointer">暂无商品评论</span>
                        </c:if>
                        <span style="cursor: pointer">加入购物车</span>
                    </div>

                    <div style="width: 900px;" class="xiaosiwol"></div>
                    <c:if test="${sessionScope.pingl!='[]'}">
                        <div class="datails-shanpan">
                            <ul>
                                <li style="cursor: pointer">全部评价(${fn:length(sessionScope.pingl)})</li>
                                <li style="cursor: pointer">晒单(3)</li>

                                <li style="cursor: pointer">好评</li>
                                <li style="cursor: pointer">中评</li>
                                <li style="cursor: pointer">差评</li>
                            </ul>
                        </div>

                        <div class="datails-suoyouping">
                            <ul style="cursor: pointer">
                                <c:forEach items="${sessionScope.pingl}" var="pingl" varStatus="s">
                                    <li>
                                        <img src="${pingl.comm_userImg}" alt="">
                                        <div>
                                            <span>${pingl.comm_user}</span>
                                            <span><img src="img/五星.png" alt=""></span>
                                            <div><fmt:formatDate value="${pingl.comm_date}" pattern="yyyy-MM-dd"/></div>
                                        </div>
                                        <span>${pingl.comm_text}</span>
                                        <span>香港俏草</span>
                                    </li>
                                </c:forEach>
                            </ul>
                            <ol style="cursor: pointer" id="ol_len">
                                <c:forEach items="${sessionScope.pingl}" var="pingl" varStatus="s">
                                    <c:if test="${pingl.comm_img!=''&&pingl.comm_img!=null}">
                                        <c:set var="row_count" value="${row_count+1}" />
                                        <li data-len="${row_count}">
                                            <img src="${pingl.comm_userImg}" alt="">
                                            <div class="datails-kk">
                                                <span>${pingl.comm_user}</span>
                                                <span><img src="img/五星.png" alt=""></span>
                                                <div><fmt:formatDate value="${pingl.comm_date}" pattern="yyyy-MM-dd"/></div>
                                            </div>
                                            <span>${pingl.comm_text}</span>
                                            <span>香港俏草</span>
                                            <div class="datails-hh">
                                                <img src="${pingl.comm_img}" alt="">
                                            </div>
                                            <div style="width: 100%;height: 20px"></div>
                                        </li>
                                    </c:if>
                                </c:forEach>
                            </ol>
                            <div class="kaonima" style="cursor: pointer">
                                <c:forEach items="${sessionScope.pingl}" var="pingl" varStatus="s">
                                    <c:if test="${pingl.comm_miqi=='5'}">
                                        <div class="list_da">
                                            <img src="${pingl.comm_userImg}" alt="">
                                            <div>
                                                <span>${pingl.comm_user}</span>
                                                <span><img src="img/五星.png" alt=""></span>
                                                <div><fmt:formatDate value="${pingl.comm_date}" pattern="yyyy-MM-dd"/></div>
                                            </div>
                                            <span>${pingl.comm_text}</span>
                                            <span>香港俏草</span>
                                            <c:if test="${pingl.comm_img!=''&&pingl.comm_img!=null}">
                                                <div class="datails-hh">
                                                    <img src="${pingl.comm_img}" alt="">
                                                </div>
                                            </c:if>

                                            <div style="width: 100%;height: 20px"></div>
                                        </div>
                                    </c:if>

                                </c:forEach>
                            </div>
                            <div class="zhongping" style="cursor: pointer">
                                <c:forEach items="${sessionScope.pingl}" var="pingl" varStatus="s">
                                    <c:if test="${pingl.comm_miqi<='4'and pingl.comm_miqi>=2}">
                                        <div class="list_da">
                                            <img src="${pingl.comm_userImg}" alt="">
                                            <div>
                                                <span>${pingl.comm_user}</span>
                                                <span><img src="img/五星.png" alt=""></span>
                                                <div><fmt:formatDate value="${pingl.comm_date}" pattern="yyyy-MM-dd"/></div>
                                            </div>
                                            <span>${pingl.comm_text}</span>
                                            <span>香港俏草</span>
                                            <c:if test="${pingl.comm_img!=''&&pingl.comm_img!=null}">
                                                <div class="datails-hh">
                                                    <img src="${pingl.comm_img}" alt="">
                                                </div>
                                            </c:if>

                                            <div style="width: 100%;height: 20px"></div>
                                        </div>
                                    </c:if>

                                </c:forEach>
                            </div>
                            <div class="chaping" style="cursor: pointer">
                                <c:forEach items="${sessionScope.pingl}" var="pingl" varStatus="s">
                                    <c:if test="${pingl.comm_miqi<=1}">
                                        <div class="list_da">
                                            <img src="${pingl.comm_userImg}" alt="">
                                            <div>
                                                <span>${pingl.comm_user}</span>
                                                <span><img src="img/五星.png" alt=""></span>
                                                <div><fmt:formatDate value="${pingl.comm_date}" pattern="yyyy-MM-dd"/></div>
                                            </div>
                                            <span>${pingl.comm_text}</span>
                                            <span>香港俏草</span>
                                            <c:if test="${pingl.comm_img!=''&&pingl.comm_img!=null}">
                                                <div class="datails-hh">
                                                    <img src="${pingl.comm_img}" alt="">
                                                </div>
                                            </c:if>

                                            <div style="width: 100%;height: 20px"></div>
                                        </div>
                                    </c:if>

                                </c:forEach>

                            </div>
                        </div>
                    </c:if>

                </li>
                <div>
                    <div class="datails-yigoumai">最新上新</div>
                    <div class="datails-xiangguan">
                        <img src="img/品牌热销1.jpg" alt="">
                        <div>韩国Laneige兰芝睡眠面膜100ml</div>
                        <span>￥129.00</span>
                        <span>月销173件</span>
                    </div>

                    <div class="datails-xiangguan">
                        <img src="img/品牌热销2.jpg " alt="">
                        <div>韩国Laneige兰芝小白光气垫(#13号亮米白色)</div>
                        <span>￥119.00</span>
                        <span>月销149件</span>
                    </div>
                    <div class="datails-xiangguan">
                        <img src="img/品牌热销3.jpg " alt="">
                        <div>韩国Laneige兰芝多效洗面奶(蓝色款)150ml</div>
                        <span>￥ 99.00</span>
                        <span>月销138件</span>
                    </div>
                </div>
            </ul>
        </div>
        <!-- 购物车商品  返回顶部 -->
        <div class="datails-lieibao">
            <ul>
                <li><img src="img/加入购物车哈哈.png" alt=""></li>
                <li>购物车</li>
                <li>X</li>
            </ul>

            <ol>

            </ol>

            <div class="datails-nandaoma">
                <div><span style="color: red;"></span>件商品</div>
                <div>共计：<span style="color:red"></span></div>
                <div onclick="gouwu()" class="datails-ke">去购物车结算</div>
            </div>
        </div>
        <div class="datails-guding">
            <div class="touxiang">
                <div class="datails-xianshi"><img class="dou" src="img/固定加入购物车.png" alt=""></div>
            </div>

            <div class="touxiang1">
                <div class="datails-xianshi1"><img class="dou1" src="img/领红包.png" alt=""></div>
            </div>

            <div class="touxiang2">
                <div class="datails-xianshi3"><img class="dou2" src="img/加入购物侧.png" alt=""></div>
                <div class="datails-keshi">购物车</div>
                <div class="datails-shuliang">
                    <div>0</div>
                </div>
            </div>
            <div class="touxing3">
                <div class="datails-xianshi2"><img class="dou3" src="img/固定加入购物车.png" alt=""></div>
            </div>

            <div class="touxing4">
                <div class="datails-xianshi4"><img class="dou4" src="img/固定加入购物车.png" alt=""></div>
            </div>

            <div class="touxing5">
                <div class="datails-xianshi5"><img class="dou5" src="img/固定加入购物车.png" alt=""></div>
            </div>

            <div class="touxing6">
                <div class="datails-xianshi6"><img class="dou6" src="img/固定加入购物车.png" alt=""></div>
            </div>

            <!-- 返回图片 -->
            <div class="touxing7">
                <div class="datails-xianshi7"><img class="dou7" src="img/返回顶部.png" alt=""></div>
            </div>
        </div>
        <div class="datails-degnlu">
            <img class="datails-degnluimg" src="img/people.gif" alt="">
            <div class="datails-yonghuming">
                <span>用户名:</span>
                <span>回头鱼</span>
            </div>
            <div class="datails-yonghuming1">
                <span>级别:</span>
                <span>新手</span>
            </div>
            <div class="datails-dingdanzhong">订单中心</div>
            <div class="datails-dingdanzhong1">账号中心</div>
        </div>
        <div class="datails-linghong">领红包在购物</div>
        <div class="datails-linghong2">我看过的</div>
        <div class="datails-linghong3">我的收藏</div>
        <div class="datails-linghong4">
            <div class="datails-qqtup"><img class="dou5" src="img/固定加入购物车.png" alt="">
            </div>
            <div class="datils-kefu">QQ客服</div>
        </div>
        <div class="datails-linghong5">
            <img src="img/二维码.jpg" alt="">
        </div>

        <div class="home-weibu">
            <div class="home-weibu1">
                <div class="home-weibu7"></div>
                <ul>
                    <li><img src="img/尾部1.png" alt=""></li>
                    <li>
                        <div class="zitiyang">自营正品</div>
                        <div class="kaixiang">正品保障 假一赔三</div>
                    </li>
                    <li>
                        <img src="img/尾部2.png" alt="">

                    </li>
                    <li>
                        <div class="zitiyang">自营正品</div>
                        <div class="kaixiang">不限品类 满88免邮</div>
                    </li>
                    <li><img src="img/尾部3.png" alt=""></li>
                    <li>
                        <div class="zitiyang">闪电发货</div>
                        <div class="kaixiang">极速发货 航空直达</div>
                    </li>
                    <li>
                        <img src="img/尾部4.png" alt="">
                    </li>
                    <li>
                        <div class="zitiyang">售后保障</div>
                        <div class="kaixiang">开箱验货 30天退换</div>
                    </li>
                </ul>
            </div>

            <div class="home-weibu2">
                <ul>
                    <li>
                        <div class="home-haoma">400-6699-840</div>
                        <div>
                            <ol>
                                <li>周一到周日</li>
                                <li>09.00-22.00</li>
                            </ol>
                        </div>
                        <div>
                            <ol>
                                <li>关注我们</li>
                                <li><img src="img/尾部5.png"></li>
                                <li><img src="img/尾部6.png"></li>
                                <li><img src="img/尾部7.png"></li>
                            </ol></div>
                    </li>
                    <li>
                        <div class="home-xiangtong">
                            <div>正品保障</div>
                            <div>30天无忧退换</div>
                            <div>消费者告知书</div>
                            <div>真假辨别</div>
                            <div>假货报道</div>
                            <div>正品保障</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-xiangtong">
                            <div>新手指南</div>
                            <div>购物流程</div>
                            <div>会员级别</div>
                            <div>支付方式</div>
                            <div>回头币</div>
                            <div>评价晒单</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-xiangtong">
                            <div>配送方式</div>
                            <div>物流查询</div>
                            <div>配送说明</div>
                            <div>防骗警示</div>
                            <div>配送时效</div>
                            <div>验货签收</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-xiangtong">
                            <div>售后服务</div>
                            <div>退货运费</div>
                            <div>退货流程</div>
                            <div>退货政策</div>
                            <div>投诉建议</div>
                            <div>联系客服</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-xiangtong">
                            <div>常见问题</div>
                            <div>账户问题</div>
                            <div>售后问题</div>
                            <div>配送问题</div>
                            <div>支付问题</div>
                            <div>常见问题</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-erwei">
                            <img src="img/二维码.jpg" alt="">
                            <div>微信公众号</div>
                        </div>
                    </li>
                    <li>
                        <div class="home-erwei">
                            <img src="img/二维码.jpg" alt="">
                            <div>客服微信号</div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 尾部 -->
        <div class="yang">
            <div class="yang-shi"></div>
            <ul>
                <li>网站简介</li>
                <li>联系我们</li>
                <li>招商合作</li>
                <li>用户协议</li>
                <li>隐私政策</li>
                <li>投诉建议</li>
            </ul>

            <p>Copyright 2012 - 2021 www.huitouyu.com. All rights reserved. 回头鱼商城版权所有</p>

            <div class="pao">
                <div class="pei"><img src="img/yin.png" alt=""></div>
                <div class="pei11"><img src="img/zhi.png" alt=""></div>
                <div class="pei11"><img src="img/wang.png" alt=""></div>
                <div class="pei11"><img src="img/zhong.png" alt=""></div>
                <div class="pei11"><img src="img/360.png" alt=""></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>